<%-- 
    Document   : index
    Created on : Jul 7, 2011, 1:23:40 AM
    Author     : Thanhluan216
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Web Photo Share</title>
        <link rel="stylesheet" href="style.css" type="text/css"/>
        <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
        <script>
            var Error="<img src='image/icon/png/error.png' alt='error'/>"
            var OK="<img src='image/icon/png/ok.png' alt='error'/>"
            var isExist=false;
            function validate(){
            var result=true;
                if ($.trim($('#collectionname').val())==""){
                    $("#err1").html(Error);
                    result=false;
                }else if (isExist==true){
                    $("#err1").html(OK);
                }
                if ($.trim($('#Description').val())==""){
                    $("#err2").html(Error);
                    result=false;
                }else{
                    $("#err2").html(OK);
                }
                if ($.trim($('#fileupload').val())==""){
                    $("#err3").html(Error);
                    result=false;
                }else {
                    var index=$('#fileupload').val().lastIndexOf(".");
                    var fileExt=$('#fileupload').val().substr(index+1);
                    var imgext=["jpg","jpeg","png","gif"];
                    var check = false;
                    var x;
                    for (x in imgext ){
                        var patt = new RegExp(imgext[x],"i");
                        if (patt.test(fileExt)){
                            check=true;
                            break;
                        }
                    }
                    if (check==false){
                        $("#err3").html(Error);
                        $("#errormsg").html("Image file support jpg,jpeg,png,gif");
                    }else{
                        $("#err3").html(OK);
                    }
                }
                return result;
            }
            function checkexist(){
                if ($.trim($("#collectionname").val())==""){
                    return false;
                }
                $.ajax({
                       type:"POST",
                       url:"doCollection",
                       data:"action=checkexist&catname="+$("#collectionname").val(),
                       complete: function (data){
                           isExist = $.trim(data.responseText);
                           if (isExist.toLowerCase()==='true'){
                               $("#errormsg").html("Your collection name is already exist");
                               $("#err1").html(Error);
                               return true;
                           }else{
                               alert('false');
                               $("#errormsg").html();
                               $("#err1").html(OK);
                               return false;
                           }
                       }
                   });
            }
            $(document).ready(function(){
               t=setInterval('validate()', 1000);
               $("#collectionname").blur(function(){
                   checkexist();
               });
               $("#btCreate").click(function(){
                   return validate() && checkexist();
               });
            });
        </script>
    </head>
    <body>
        <div id="wrapper">
            <div id="header">

                <h1>Photo Share</h1>
                <img src="header_right.gif" alt="hinh"/>
            </div>
            <div id="nav">
                <ul>
                    <li><a href="index.jsp">Home</a></li>
                    <li><a href="allcollection.jsp">Manage Collection</a></li>
                    <li><a href="controlertuan?action=getListPhoto">Manage Image</a></li>
                    <li><a href="upload.jsp">Upload</a></li>
                    <li><a href="faq.jsp">FAQs</a></li>
                    <li class="end"><a href="contactus.jsp">Contact</a></li>
                </ul>
            </div>
            <div id="main">
                <div id="slidebar">
                    <div id="login">
                        <jsp:include page="login.jsp"></jsp:include>
                    </div>
                    <div id="search">
                        <jsp:include page="search.jsp"></jsp:include>
                    </div>
                    <div id="product">
                        <jsp:include page="categorypanel.jsp"></jsp:include>
                    </div>
                </div>
                <div id="content">
                    <a href="#">Home</a>-><a href="#">My Collection</a>-><a href="#">Create Collection</a>
                    <br/>
                    <form action="doUploadCategory" method="POST" enctype="multipart/form-data">
                        <h2>Create new Collection</h2>
                        <p id="errormsg"></p>
                        <table border="0">
                            <tr>
                                <td>Collection Name</td>
                                <td><input type="text" name="txtColName" id="collectionname"value=""/><span id="err1"></span></td>
                            </tr>
                            <tr>
                                <td>Description:</td>
                                <td><input type="text" name="txtDescription" id="Description" value=""/><span id="err2"></span></td>
                            </tr>
                            <tr>
                                <td>Collection Image</td>
                                <td><input type="file" name="image" id="fileupload" value= /><span id="err3"></span></td>
                            </tr>
                            <tr>
                                <td><input type="hidden" name="fromPage" value="newcolection"/>
                                    <input type="submit" name="action" value="Create" id="btCreate"/></td>
                                <td><input type="reset" name="reset" value="Cancel"/></td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
            <div id="footer">

            </div>
        </div>
    </body>
</html>
